<template>
    <ul>
        <li v-for="(item,index) in mean" :key="index" @click="toChoose(index)">
            <router-link :to='"/"+item.url' :style="{color: choose===index ? '#6da6e1':''}">
                <img :src="item.logo" alt="图片丢失" title="msg">
                <span class="headerMean_msg">{{ item.msg }}</span>
            </router-link>
        </li>
        <li >
            <BaseUl @index-sub="toChoose" :index="-1" :list="item_list" :img="'/img/header/concerning.png'">
                <template v-slot:title><span :style="{color: choose===-1 ? '#6da6e1':''}">关于</span> </template>
            </BaseUl>
        </li>
    </ul>


</template>
<!--导航栏菜单-->
<script setup>
import {onMounted, onUpdated, ref} from 'vue'
import BaseUl from "@/components/publicComponent/BaseUl.vue";
// 单个页面数据列表
const mean = ref([
    {url: "home", logo: "/img/header/latest.png", msg: "最新"},
    {url: "game", logo: "/img/header/game.png", msg: "游戏"},
    {url: "software", logo: "/img/header/software.png", msg: "软件"},
]);
//默认选中第一个
const choose = ref(0);
//点击事件
const toChoose = (index)=>{
    choose.value=index;
    //记住当前选择导航下标，防止刷新丢失
    window.localStorage.setItem("Current_option",index);
}

onMounted(()=>{
    let nowIndex = window.localStorage.getItem("Current_option");
    if(nowIndex){
        choose.value=parseInt(nowIndex) ;
    }
})


//广场下拉列表数据
const item_list = ref([
    {url: "announcement", msg: "公告"},
    {url: "websiteHelp", msg: "帮助"},
]);
</script>

<style scoped>
img {
    object-fit: cover;
}

ul {
    list-style: none;
    display: flex;
    padding: 0 40px;
    height: 100%;
    z-index: 9;
}

li {
    min-width: 50px;
    max-width: 120px;
    width: 100%;
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

li a {
    width: 100%;
    min-width: 80px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

img {
    width: 15px;
    vertical-align: middle;
}

.headerMean_msg {
    font-size: 14px;
    min-width: 50px;
    max-width: 120px;
}


.headerMean_search input {
    border-bottom-left-radius: 18px;
    border-top-left-radius: 18px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    border: 0;
    outline: none;
    text-indent: 15px;

}

@keyframes search {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}


</style>